<template>
  <div>
    <div class="view-task-detail" :style="`padding-bottom:${tabList?.length ? 0 : '16px'}`">
      <div class="view-task-title">
        <px-button type="primary" icon="ArrowLeft" @click="handleGoBack">返回</px-button>
        <div class="text">{{ bacicData.taskName }}</div>
        <px-tag class="ml-2" :type="tagArr[bacicData['taskStatus']]"
          >{{ bacicData["taskStatusDesc"] }}{{ bacicData.timeOut === 1 ? "(超期)" : "" }}</px-tag
        >
        <!-- <div v-show="!!bacicData.taskStatusDesc" class="status">
          <div class="circle" :style="{ backgroundColor: `${TAG_CONFIG[bacicData.taskStatus]?.color}` }" />
          <p :style="{ color: `${TAG_CONFIG[bacicData?.taskStatus]?.color}` }">{{ bacicData.taskStatusDesc }}</p>
          <p v-if="bacicData.timeOut === 1" :style="{ color: '#EF4444', marginLeft: '4px' }">超期</p>
        </div> -->
      </div>
      <div v-if="(bacicData?.taskStatus === 1 || bacicData?.taskStatus === 2) && USER_ROLE.isoperator(bacicData)">
        <!-- <px-button v-show="bacicData?.taskStatus === 1" type="primary" v-has="'ERC_INSPECT_TASK_TODO'" plain @click="emits('handleChange')"
          >修改任务</px-button
        > -->
        <!-- <px-button
          v-show="bacicData?.taskStatus === 1"
          type="primary"
          v-has="'ERC_INSPECT_TASK_CANCEL'"
          plain
          @click="emits('handleCancel', bacicData)"
          >取消任务</px-button
        > -->
        <px-button v-has="'ERC_INSPECT_TASK_TODO'" type="primary" @click="emits('gotoTaskDetail')">执行任务</px-button>
      </div>
    </div>
    <CustomTabs :tabList="tabList" :activeName="activeName" style="margin-bottom: 12px" @tabSelect="handelTabSelected" />

    <div v-show="activeName === 'task'" class="view-flex">
      <px-scrollbar ref="scrollbarRef" class="inspect-task-detail-content" @scroll="handleScroll">
        <div ref="basicsRef">
          <div class="view-equip-title">基础信息</div>
          <ColumnsTable :columns="INSPECTTASKDETAIL_BASEINFO_COLUMNS" :data="bacicData"
            ><template #value="{ scope }">
              <template v-if="scope.prop === 'checkAreaDesc' && bacicData.checkAreaDesc">
                <px-tag
                  v-for="(item, index) in bacicData.checkAreaDesc.split(',')"
                  :key="index"
                  class="ml-2"
                  style="margin-top: 2px; margin-bottom: 2px"
                  type="info"
                  >{{ item }}</px-tag
                >
              </template>
              <template v-if="scope.prop === 'checkType' && bacicData.checkType">
                {{ dealCheckTypeName(bacicData.checkType) }}
              </template>
            </template></ColumnsTable
          >
        </div>
        <div ref="contentRef" class="view-mb20">
          <div class="view-equip-title">巡检内容</div>
          <InspectRulesTable :table-data="tableData" :tableColumns="tableColumns" :total="0" class="w-[100%]" />
        </div>
        <!-- <div ref="periodRef"></div> -->
        <div ref="equipRef">
          <div class="view-equip-title">巡检设备</div>
          <InspectRulesTable :table-data="tableEqiupSelected" :tableColumns="tableEqiupColums" :total="0" class="w-[100%]" />
        </div>
      </px-scrollbar>
      <WidgetRouter :router-list="routerList" :scrollbar-ref="scrollbarRef" :scroll-top="scrollTop" />
    </div>
    <MaintainTable v-if="activeName === 'maintain'" :data="maintainTableData" />
  </div>
</template>
<script setup lang="ts">
import CustomTabs from "@/components/Tabs/index.vue";
import { debounce } from "@pureadmin/utils";
import { computed, onBeforeMount, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import ColumnsTable from "../../components/ColumnsTable.vue";
import { WidgetRouter } from "../../components/index";
import { TableItem } from "../../types";
import {
  INSPECTTASKDETAIL_BASEINFO_COLUMNS,
  INSPECTTASKDETAIL_CONTENT_COLUMNS,
  INSPECTTASKDETAIL_EQUIP_COLUMNS_READONLY,
  TAG_CONFIG,
  USER_ROLE
} from "../config";
import InspectRulesTable from "./InspectRulesTable.vue";
import MaintainTable from "./MaintainTable.vue";
const route = useRoute();
const router = useRouter();
const emits = defineEmits(["handleCancel", "gotoTaskDetail", "backMainPage"]);
// 巡检规则table
const tableColumns = ref<TableItem[]>(INSPECTTASKDETAIL_CONTENT_COLUMNS);
const tagArr = ["info", "warning", "primary", "success", "success", "primary"];
//选择设备table
const tableEqiupColums = ref<TableItem[]>(INSPECTTASKDETAIL_EQUIP_COLUMNS_READONLY);
const activeName = ref("task");
const props = defineProps(["bacicData", "tableData", "tableEqiupSelected", "maintainTableData"]);
const tabList = computed(() => {
  if (props.maintainTableData.length) {
    return [
      { name: "task", label: "巡检任务" },
      { name: "maintain", label: "巡检维修信息" }
    ];
  } else {
    return [];
  }
});
const checkTypeArr = { equipment: "设备巡检", environment: "环境巡检" };
const dealCheckTypeName = checkType => {
  if (!checkType || !checkType.length) return "";
  return checkType.reduce((acc, cur) => {
    if (!acc) return checkTypeArr[cur];
    return acc + "," + checkTypeArr[cur];
  }, "");
};
// 点击tab显示页面详情
const handelTabSelected = selectName => {
  activeName.value = selectName;
};
// 返回上一级
const handleGoBack = () => {
  if (route.query.taskNo) {
    // 其他页面进入详情，返回其他页面
    router.go(-1);
  } else {
    emits("backMainPage");
  }
};
// 通过任务状态判断是否应该显示指定操作按钮
const showActionBtnByTaskStatus = (status: number, action: string) => {
  const statusConfig = TAG_CONFIG[status];
  if (statusConfig) {
    const flag = statusConfig.actions.includes(action);
    return flag;
  } else {
    return false;
  }
};
const showActionBtn = (data: any, action: string, type: number) => {
  const flag = showActionBtnByTaskStatus(data.taskStatus, action);
  // 计划创建人
  return flag && USER_ROLE.isCreater(data);
};
//右侧滚动导航
const scrollbarRef = ref(null);
const routerList = ref([]);
const scrollTop = ref();
//折叠面板ref
const basicsRef = ref(null);
const contentRef = ref(null);
// const periodRef = ref(null);
const equipRef = ref(null);

//右侧滚动导航相关函数
const handleScroll = debounce(({ scrollTop: curScrollTop }) => {
  scrollTop.value = curScrollTop;
}, 200);
const scrollInit = () => {
  let routerName = "基本信息,巡检内容,巡检设备";
  let routerRefs = [basicsRef, contentRef, equipRef];
  routerList.value = routerName.split(",").map((item, index) => ({ ref: routerRefs[index], name: item }));
};
onBeforeMount(() => {
  scrollInit();
});
</script>

<style lang="scss" scoped>
.view-equip-title {
  height: 22px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: rgb(0 0 0 / 80%);
}

.view-flex {
  position: relative;
  display: flex;
  height: calc(100vh - 210px);
}

.view-mb20 {
  margin-bottom: 20px;
}

.view-task-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;

  .view-task-title {
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
      margin-left: 20px;
      font-size: 20px;
      font-weight: 600;
      color: rgb(0 0 0 / 90%);
    }

    .status {
      display: flex;
      flex-direction: row;
      align-items: center;

      .circle {
        width: 8px;
        height: 8px;
        margin-right: 5px;
        margin-left: 8px;
        border-radius: 50%;
      }
    }
  }
}

:deep(.inspect-task-detail-content) {
  width: 100%;
  min-width: 500px;
}
</style>
